<template>
  <section>
    <!--头部开始-->
    <header id="header"
            class="site-header">
      <div class="wraper">
        <hgroup class="header-left">
          <h1>小米</h1>
          <h2></h2>
        </hgroup>

        <div class="header-right">
          <input type="text"
                 class="search"
                 list="search-record"
                 name="search"
                 v-model="searchKey">
          <button class="btn"
                  @click="search">搜索</button>
          <ul>
            <li v-for="histiry in searchHistory">{{histiry.key}}<span>{{histiry.desc}}</span></li>
          </ul>
        </div>
      </div>
    </header>
    <!--头部结束-->

  </section>
</template>

<script>
export default {
  name: 'HeaderBar',
  data () {
    return {
      searchKey: '',
      searchHistory: [
        {
          key: '小米手机5',
          desc: '约有11件'
        },
        {
          key: '小米手机5',
          desc: '约有11件'
        },
        {
          key: '小米手机5',
          desc: '约有11件'
        },
        {
          key: '小米手机5',
          desc: '约有11件'
        },
        {
          key: '小米手机5',
          desc: '约有11件'
        }
      ]
    }
  },
  methods: {
    search: () => {

    }
  }
}
</script>

<style lang='less' scoped>
.site-header {

  .header-right {
    width: "80%" !important;
  }
}
</style>
